<template>
    <div class="data-loader"
         v-show="show">
        <div class="mask"></div>
        <div class="modal">

            <div class="btn-close"
                 @click="()=>{this.$emit('close')}">关闭</div>

            <div class="header">
                <div class="title">加载数据</div>
            </div>

            <radioGroup @change="changeType"
                        :radios="radios" />
            <formItem v-if="type === 'api'" />

            <fileLoader @load="loadData" />
            <preview :data="data" />

            <div class="bottom">
                <div class="btn-confirm"
                     @click="confirmData">完成</div>
            </div>
        </div>
    </div>
</template>
<!-- <div class="iframe"
                 v-if="type === 'api'">
                <iframe @load="iframeLoad"
                        ref="iframe"
                        src="https://index.iresearch.com.cn/app/GetDataList/?classId=0&classLevel=0&timeId=88&orderBy=2&pageIndex=1&pageSize=20"></iframe>
            </div> -->
<script>
import radioGroup from "./radioGroup.vue";
import formItem from "./formItem.vue";
import preview from "./preview.vue";
import fileLoader from "./fileLoader.vue"

// import {request} from "./utils/request.js"
export default {
    name: "hello",
    components: {
        radioGroup,
        formItem,
        preview,
        fileLoader
    },
    props: {
        show: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            radios: [
                { title: "文件", value: "excel" },
                // { title: "json", value: "json" },
                // { title: "接口地址", value: "api" }
            ],
            type: "excel",
            data: [],
        };
    },
    // created(){
    //   request({
    //     url:`https://index.iresearch.com.cn/app/getClassIndex?timeid=88&type=1`
    //   }).then(res => {
    //     console.log(res);

    //   })
    // },
    computed: {},
    methods: {
        iframeLoad (e) {
            console.log(e);
            console.log(this.$refs.iframe.contentWindow.document);

        },
        confirmData () {
            this.$emit('confirm', this.data)
        },
        loadData (data) {
            console.log('excel 转化数组', data);
            this.data = data
        },
        changeType (res) {
            let { value } = res;
            this.type = value;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.modal {
    position: relative;
    position: fixed;
    box-sizing: border-box;
    padding: 20px 40px;
    width: 500px;
    border-radius: 20px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #fff;
    z-index: 101;
    justify-content: center;

    .btn-close {
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        color: #ee0a24;
    }

    .header {
        height: 50px;
        position: relative;
        text-align: center;
        .title {
            font-weight: bold;
            font-size: 20px;
        }
    }
    .iframe {
        width: 100%;
        height: 200px;
    }

    .bottom {
        margin-top: 20px;
        width: 100%;
        position: relative;
        text-align: center;
        .btn-confirm {
            display: inline-block;
            width: 100px;
            cursor: pointer;
            padding: 0 20px;
            border-radius: 15px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #07c160;
            color: #fff;
            margin: 0 20px;
        }
    }
}
.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba($color: #000000, $alpha: 0.7);
    z-index: 100;
}
</style>
